<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
function sum(arr) {
  let newArr = [];
  for (let i = 0; i < arr.length; i++) {
    let arri = arr[i];
    let lastArr = newArr[i - 1];
    newArr.push(
      arri.map((n, index) => n + (lastArr ? lastArr[index] || 0 : 0))
    );
  }
  console.log(newArr);
  return newArr;
}
function sum1(arr) {
  let newArr = [];
  for (let i = 0; i < arr.length; i++) {
    let arri = arr[i];
    let lastArr = newArr[i - 1];
    newArr.push(
      arri.map((n, index) => n + (lastArr ? lastArr[index] || 0 : 0))
    );
  }
  let arrList = [];
  newArr.forEach((as, index) => {
    as.forEach((as1, index1) => {
      if (index1 !== 0) {
        console.log(as1);
        let lastArr = newArr[index - 1];
        arrList.push([
          [
            lastArr ? lastArr[index1 - 1] || 0 : 0,
            lastArr ? lastArr[index1] || 0 : 0,
            as[index1] || 0,
            as[index1 - 1] || 0,
            index1,
          ],
        ]);
      }
    });
  });
  console.log(arrList);
  return arrList;
}
const testData = [
  [130, 130, 200, 334, 390, 330, 220],
  [130, 130, 200, 334, 390, 330, 220],
  [130, 130, 200, 334, 390, 330, 220],
  [130, 130, 200, 334, 390, 330, 220],
];
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        background: "#F1F0F2",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: 10,
          left: 0,
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            splitLine: {
              show: false,
            },

            axisLine: {
              show: false,
            },

            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },

            axisLine: {
              show: false,
            },

            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "custom",
            name: "trend",
            renderItem: function (params, api) {
              var xValue = api.value(0);
              var currentSeriesIndices = api.currentSeriesIndices();
              var barLayout = api.barLayout({
                barWidth: "60%",
                count: 7,
              });
              var points = [];
              let lastPoint = -barLayout[0].bandWidth * 0.2;
              for (var i = 0; i < 7; i++) {
                var point = api.coord([xValue, api.value(i)]);
                let p1 = lastPoint + barLayout[i].bandWidth * 0.4;
                let p2 = p1 + barLayout[i].bandWidth * 0.6;
                points.push([p1, point[1]]);
                points.push([p2, point[1]]);
                lastPoint = p2;
              }
              var style = api.style({
                stroke: "#f1f0f2",
                fill: "none",
                lineWidth: 2,
              });
              return {
                type: "polyline",
                shape: {
                  points: points,
                },
                style: style,
              };
            },
            itemStyle: {
              borderWidth: 1,
            },
            encode: {
              x: 0,
              y: [0, 1, 2, 3, 4, 5, 6],
            },
            data: sum(testData),
            z: 110,
          },
          {
            type: "custom",
            name: "trend",
            renderItem: function (params, api) {
              var xValue = api.value(0);
              var barLayout = api.barLayout({
                barWidth: "60%",
                count: 7,
              });
              let lastPoint = barLayout[0].bandWidth * 0.2;
              let bandWidth = barLayout[0].bandWidth;
              var style = api.style({
                fill: "#d6dbef",
              });
              let seriesIndex = xValue[4];
              let point1 = api.coord([xValue[0], xValue[0]]);
              let point2 = api.coord([xValue[0], xValue[1]]);
              let point3 = api.coord([xValue[0], xValue[2]]);
              let point4 = api.coord([xValue[0], xValue[3]]);
              let p1 =
                lastPoint + bandWidth * 0.6 + bandWidth * (seriesIndex - 1);
              let p2 = p1 + bandWidth * 0.4;
              point1[0] = p1;
              point2[0] = p2;
              point3[0] = p2;
              point4[0] = p1;
              lastPoint = p2;
              return {
                type: "polygon",
                shape: {
                  points: [point1, point2, point3, point4],
                },
                style: style,
              };
            },
            itemStyle: {
              borderWidth: 1,
              fill: "rgba(0,0,0,0.2)",
            },
            encode: {
              x: 0,
              y: [0, 1, 2, 3, 4, 5, 6],
            },
            data: sum1(testData),
            z: 100,
          },
          ...testData.map((data, index) => {
            return {
              name: "page" + index,
              type: "bar",
              stack: "vistors",
              barWidth: "60%",
              data,
              label: {
                show: true,
                position:'insideBottomLeft',
                color:"#Fff"
              },
            };
          }),
        ],
      });
    },
  },
};
</script>
